<template>
	<view class="content" v-show="orderInfo">
		<view class="order_one order_tow">
			<view class="flex_sb">
				<view class="order_tow_title flxe_al">
					<image src="https://z1.ax1x.com/2023/09/15/pPWyt2Q.png" mode=""></image>
					社区名称 {{ orderInfo.community_name }}
				</view>
				<!-- <u-icon name="arrow-right" color="#BCBBBB" size="28"></u-icon> -->
			</view>
			<view class="order_tow_address">
				详细地址：{{orderInfo.address}}
			</view>
			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					上门取鞋时间
				</view>
				<view class="order_tow_item_font_color">
					{{orderInfo.door_time}}
				</view>
			</view>
			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					联系人电话
				</view>
				<view class="order_tow_item_font">
					{{orderInfo.contacts_mobile}}
				</view>
			</view>

			<view class="order_tow_item flex_sb">
				<view class="order_tow_item_font">
					联系人
				</view>
				<view class="order_tow_item_font">
					{{orderInfo.contacts}}
				</view>
			</view>


		</view>
		<view class="address-order">
			<!-- <view class="address" v-if="type == 'dzf'">
				<view class="name">
					<image src="https://www.sdxiecheng.cn/img/myaddress.png" mode=""></image>
					<text>鞋柜编号：{{ orderInfo.cabinet_name }}</text>
				</view>
				<view class="address-des">
					地址：{{ orderInfo.address }}
				</view>
			</view> -->
			<view class="order">
				<view class="order-li">
					<image :src="'https://www.sdxiecheng.cn/'+orderInfo.goods_image" mode=""></image>
					<view class="order-li-right">
						<view class="name">{{orderInfo.goods_title}}</view>
						<view class="des">{{orderInfo.goods_describle}}</view>
						<view class="price">¥{{orderInfo.original_price}}</view>
					</view>
				</view>
			</view>


		</view>
		<view class="order-info">
			<view class="order-info-li">
				<view>数量：</view>
				<text>{{ orderInfo.goods_num }}双</text>
			</view>
			<view class="order-info-li">
				<view>商品金额：</view>
				<text>￥{{orderInfo.goods_price}}</text>
			</view>
			<view class="order-info-li">
				<view>取送费：</view>
				<text>￥{{orderInfo.delivery_fee}}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.coupon_id">
				<view>优惠金额：</view>
				<text>￥{{orderInfo.coupon_fee}}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'card'">
				<view>会员支付：</view>
				<text>{{ orderInfo.card_type }}</text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'balance'">
				<view>余额支付：</view>
				<text>￥{{orderInfo.total_fee}} </text>
			</view>
			<view class="order-info-li" v-if="orderInfo.pay_type == 'wechat'">
				<view>微信支付：</view>
				<text>￥{{orderInfo.total_fee}}</text>
			</view>
			<view class="order-info-li">
				<view>下单时间：</view>
				<text>{{ orderInfo.createtime }}</text>
			</view>

			<view class="order-info-li" v-if="type !=='dzf'">
				<view>支付时间：</view>
				<text>
					{{ orderInfo.paytime }}
				</text>
			</view>
			<view class="order-info-li">
				<view>订单编号：</view>
				<text>{{ orderInfo.order_sn }}</text>
			</view>
			<view class="order-info-li">
				<view>备注信息：</view>
				<text>{{ orderInfo.remark }}</text>
			</view>
			<!-- 			<view class="order-info-li shuxiang">
				<view>附件：</view>
				<image style="margin-top: 20rpx;" v-if="orderInfo.enclosure_images"
					@click="previewImage(orderInfo.enclosure_images)" :src="orderInfo.enclosure_images" mode=""></image>
			</view> -->
			<view v-if="type == 'sh'">
				<view class="shouhou-li" v-if="orderInfo.pay_type != 'card'">
					退款金额：￥{{orderInfo.total_fee}}
				</view>
				<view class="shouhou-li">
					<view>退款原因</view>
					<textarea :disabled="true" v-model="orderInfo.refund_desc" />
				</view>
				<!-- <view class="btn-box" style="padding-bottom: 0;">
					<button class="u-reset-button btn3" >提交</button>
				</view> -->
			</view>


		</view>
		<!-- 取鞋信息 -->
		<view class="qs_xx_box" v-if=" type !=='dzf' && type !=='sh'  ">
			<h2>
				取鞋信息
			</h2>
			<view class="qs_xx_box_text">
				<view class="">
					取鞋人员：{{orderInfo.username}}
				</view>
				<view class="">
					联系电话：{{orderInfo.usermobile}}
				</view>
				<view class="">
					鞋子数量：{{orderInfo.take_shoe_num}}双
				</view>
				<view class="">
					取鞋时间：{{orderInfo.door_time}}
				</view>
				<view class="">
					取鞋凭证
				</view>
				<view class="qs_xx_box_image">
					<image v-for="(item,index) in orderInfo.take_shoe_images"  @click="previewImage(item)"  :src="item" mode=""></image>
				</view>
			</view>

		</view>
		<!-- 送鞋信息 -->
		<view class="qs_xx_box" v-if="type !=='dcx' &&  type !=='dzf' && type !== 'xxz' && type !=='sh' ">
			<h2>
				送鞋信息
			</h2>
			<view class="qs_xx_box_text">
				<view class="">
					取鞋人员：{{orderInfo.username}}
				</view>
				<view class="">
					联系电话：{{orderInfo.usermobile}}
				</view>
				<view class="">
					鞋子数量：{{orderInfo.delivery_shoe_num}}双
				</view>
				<view class="">
					送鞋时间：{{orderInfo.delivery_time}}
				</view>
				<view class="">
					送鞋凭证
				</view>
				<view class="qs_xx_box_image">

					<image v-for="(item,index) in orderInfo.delivery_shoe_images"  @click="previewImage(item)"  :src="item" mode=""></image>
				</view>
			</view>
		</view>

		<view class="order-bottom-box">
			<view class="order-bottom-info">
				<view class="price">

				</view>
				<button class="u-cancellation-button" @click="sanque(1)" v-if="type=='dzf' || type=='ywc'">
					删除订单
				</button>
				<button class="u-reset-button" v-if="type=='dzf'" @click="nowPay(order_id,orderInfo.total_fee)">立即支付</button>
				<button class="u-reset-button" v-if="type=='dcx'" @click="refund(orderInfo.id,order_id)">退款</button>
				<button class="u-reset-button" v-if="type=='dqx'" @click="sanque(2)">确认完成</button>
			</view>
		</view>

		<!-- 底部按钮 -->
		<!-- <view class="order-bottom-box" v-if="type == 'dcx'">
			<view class="order-bottom-info">
				<view class="price">
					<!-- 实付金额： -->
		<!-- <text>¥8.00</text> -->
		<!-- </view>
				<button class="u-reset-button" @click="isPay()">打开柜门</button>
			</view>
		</view> -->
		<!-- 开柜子弹窗 -->
		<!-- 取消订单 -->
		<!-- 	<u-modal v-model="guiziShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10" :show-cancel-button="true"
			:confirm-style="confirmStyle" @confirm="isOpenGuiZi"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text>
						打开柜门
					</text>
					<text>
						请确保本人在柜子前面
					</text>
				</view>
			</view>
		</u-modal> -->
		<!-- 柜子打开成功 -->
		<!-- <u-modal v-model="guiziChengGongShow" title="温馨提示" confirm-color="#FF9A33" border-radius="10"
			:confirm-style="confirmStyle" confirm-text="完成" @confirm="caozuowancheng"
			:title-style="{'font-weight':'bold','font-size':'30rpx','padding-top':'30rpx'}">
			<view class="slot-content">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-size: 28rpx;
				margin-bottom: 50rpx;
				margin-top: 49rpx;
				line-height: 45rpx;
				">
					<text style="color: #FF9A33;">
						{{ num }} 号
					</text>
					<text v-if="type == 'dcx'">
						柜门已打开，请存鞋
					</text>
					<text v-if="type == 'dqx'">
						柜门已打开，请取鞋
					</text>
				</view>
			</view>
		</u-modal> -->
		<u-modal v-model="show2" title='温馨提示' @confirm='confirms()' cancel-color='#333333' confirm-color='#FF9A33'
			show-cancel-button show-confirm-button class="pop_input">
			<view class="wxts" v-if="active_sq==1">
				确定删除订单吗？<br>
				删除之后将不会再显示
			</view>
			<view class="wxts" v-else>
				为了保障您的权益，请收到<br>
				鞋子确认无误后再确定完成
			</view>

		</u-modal>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '', //订单id
				show2: false, //弹窗显示隐藏
				active_sq: 1, //判断删除订单或者确认订单
				action: '',
				guiziShow: false,
				guiziChengGongShow: false,
				confirmStyle: {
					'borderLeft': '1px solid #EEEEEE'
				},
				type: '',
				id: '',
				orderInfo: '',
				num: '',
				index: 0
			}
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			this.id = e.id
			this.order_id = e.order_id
			this.index = e.index - 0
			this.getDcxOrder()
		},
		onShow() {
			this.getDcxOrder()
		},
		methods: {
			// 弹窗确认
			confirms() {
				if (this.active_sq == 1) {
					// 删除订单()	
					this.cears()
				} else {
					this.success_order()
				}
			},
			// 支付订单
			nowPay(order_id, paidAmount) {
				console.log(1)
				uni.navigateTo({
					url: '../payment/on_payment?order_id=' + order_id + '&amount=' + paidAmount
					
				})
				console.log(2)
			},
			// 删除订单
			cears() {
				uni.$u.http.post('/order/delete_orderon', {
					order_id: this.order_id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}

				})
			},
			// 确认订单
			success_order() {
				uni.$u.http.post('/order/ask_orderon', {
					order_id: this.order_id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}

				})
			},
			// 退款操作
			refund(id) {
				console.log(id)
				uni.navigateTo({
					url: '../on_refund?id=' + id + '&type=tk' + '&index=1' + '&order_id=' + this.order_id
				})
			},
			//点击删除订单和确认收货弹窗
			sanque(type) {
				this.active_sq = type
				this.show2 = true
			},
			isPay() {
				this.guiziShow = true
			},
			// 订单详情
			getDcxOrder() {
				uni.$u.http.post('/order/detailon', {
					id: this.id
				}).then(res => {
					console.log(res)
					this.orderInfo = res.data
				})
			},
			// 预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			caozuowancheng() {
				this.guiziChengGongShow = false
				uni.$emit('updateOrder', {
					index: this.index
				})
			},
			isOpenGuiZi() {
				let that = this
				this.guiziShow = false
				uni.showLoading({
					title: '柜子打开中。。。'
				})
				if (this.type == 'dcx') {
					uni.$u.http.post('/device/open_cshoe', {
						id: this.$store.state.shoecabinet_id,
						order_id: this.orderInfo.id
					}).then(res => {
						if (res.code == 200) {
							that.guiziChengGongShow = true
							that.num = res.data.info
							uni.hideLoading()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					}).catch(err => {
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				} else if (this.type == 'dqx') {
					uni.$u.http.post('/device/open_save', {
						id: this.$store.state.shoecabinet_id,
						order_id: this.orderInfo.id
					}).then(res => {
						that.guiziChengGongShow = true
						that.num = res.data.info
						uni.hideLoading()
						console.log(res)
					}).catch(err => {
						console.log(err)
						uni.showToast({
							icon: 'none',
							title: err.data.msg
						})
					})
				}



			}
		}
	}
</script>

<style lang="less">
	.content {
		padding: 10rpx 20rpx;
	}

	.address-order {
		background: #FFFFFF;
		border-radius: 10rpx;

		.address {
			padding: 30rpx;
			padding-bottom: 40rpx;
			background: url('https://www.sdxiecheng.cn/img/address-line.png') bottom no-repeat;
			background-size: 100%;

			.name {
				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 19rpx;
				}

				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 27rpx;
			}

			.address-des {
				color: 24rpx;
				color: #666666;
			}
		}
	}

	// 订单样式
	.order {
		padding: 0 9rpx;
		padding-top: 34rpx;

		.order-li {
			display: flex;
			align-items: center;
			padding-bottom: 35rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.order-li-right {
				width: calc(100% - 150rpx);
				padding-left: 20rpx;

				.name {
					font-size: 30rpx;
				}

				.des {
					font-size: 24rpx;
					margin-top: 9rpx;
					margin-bottom: 9rpx;
				}

				.price {
					font-size: 36rpx;
					font-weight: 500;
					color: #FF9A33;
				}
			}

		}
	}

	// 订单信息
	.order-info {
		// min-height: calc(100vh - 370rpx);
		background: #FFFFFF;
		// border-radius: 10rpx;
		border-radius: 0 0 10rpx 10rpx;
		border-top: 1px solid #EEEEEE;
		// margin-top: 20rpx;
		padding: 39rpx 21rpx;

		.order-info-li {
			display: flex;
			align-items: center;
			line-height: 60rpx;
			font-size: 30rpx;
		}

		.shuxiang {
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.name {
				margin-bottom: 20rpx;
			}

			image {
				width: 209rpx;
				height: 209rpx;
			}
		}
	}

	// 配送信息
	.peisong {
		margin-top: 50rpx;

		.title {
			font-size: 30rpx;
			font-weight: 500;
		}

		.image-list {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
		}

		.image-li {
			width: 180rpx;
			margin-right: 30rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 18rpx;
			}

			text {
				font-size: 28rpx;
				color: #7C7C7C;
				text-align: center;
			}
		}
	}

	.btn-box {
		padding-bottom: 98rpx;

		.btn3 {
			width: 650rpx;
			height: 80rpx;
			background: #FBAA27;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 150rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	// 底部按钮
	.order-bottom-box {
		width: 100%;
		height: 98rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
		padding: 0 30rpx;

		.order-bottom-info {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.price {
				font-size: 36rpx;
				font-weight: 500;

				text {
					color: #FF9A33;
				}
			}

			button {
				margin: 0;
				width: 180rpx;
				height: 70rpx;
				border-radius: 35rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FF9A33;
				white-space: nowrap;
				margin-left: 30rpx;
			}

			.u-cancellation-button {
				border: 1rpx solid #999999;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
			}
		}
	}

	// 售后
	.shouhou-li {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 60rpx;

		textarea {
			width: 100%;
			height: 200rpx;
			border: 2rpx solid #F2F2F2;
			padding: 20rpx;
			font-weight: normal;
			margin-top: 20rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			line-height: normal;
		}
	}

	.order_one {
		border-radius: 10rpx;
		padding: 30rpx;
		background: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.order_tow_title>image,
	.order_tow_item_font>image {
		width: 24rpx;
		height: 30rpx;
		margin-right: 19rpx;
	}

	.order_tow_title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.order_tow_address {
		margin: 25rpx 0 0;
		padding-bottom: 25rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		border-bottom: 1rpx solid #F2F6FC;
	}

	.order_tow_item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #F2F6FC;
		// border-bottom: 1px solid red;

	}

	.order_tow_item_font {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;

	}

	.order_tow_item_font_color {
		font-size: 30rpx;
		font-weight: 400;
		color: #FBAA27;
	}

	.order_right input {
		text-align: right;
	}

	.qs_xx_box {
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 35rpx 35rpx 40rpx;
	}

	.qs_xx_box>h2 {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 40rpx;
	}

	.qs_xx_box_text>view {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 60rpx;
	}

	.qs_xx_box_image {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30rpx;
		margin-top: 30rpx;
	}

	.qs_xx_box_image>image {
		width: 180rpx;
		height: 180rpx;
	}

	.content {
		padding-bottom: 100rpx;
	}

	.wxts {
		width: 400rpx;
		margin: 48rpx auto;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		text-align: center;
	}
</style>